<template>
  <div class="payment_index">
    <div class="payment_index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">团队成员<i class="el-icon-close"></i></div>
    </div>
    <div class="payment_index_bottom">
      <div class="payment_index_bottom_new">
        <div class="payment_index_bottom_new_goods">
          <div class="payment_index_bottom_new_goods_btn">
            <!-- <el-button type="primary" @click="handleAdd">新增成员</el-button> -->
          </div>
          <div class="payment_index_bottom_new_goods_screening">
            <div class="payment_index_bottom_new_goods_screening_left">
              <!-- <i>选择小区</i>
              <el-select v-model="tagType"
                         @change="getTag"
                         multiple
                         popper-class="el-select"
                         placeholder="请选择">
                <el-option v-for="item in shopTagList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select> -->
            </div>
            <div class="payment_index_bottom_new_goods_screening_right">
              <el-input v-model="input"
                        placeholder="请输入订单信息查询"></el-input>
              <button @click="toSearch"><i class="el-icon-search"></i>搜索</button>
            </div>
          </div>
        </div>
      </div>
      <div class="payment_index_bottom_table_box">
        <div class="payment_index_bottom_table">
          <table>
            <tr>
              <th></th>
              <th>序号</th>
              <th>工号</th>
              <th>姓名</th>
              <th>手机号</th>
              <th>在线工地</th>
             
              <th>操作</th>
            </tr>
            <tr v-for="(v,i) in tableList"
                :key="i">
                <td>
                    <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                </td>
                <td>{{i+1}}</td>
                <td>{{v.work_no}}</td>
                <td>{{v.name}}</td>
                <td>{{v.phone}}</td>             
                <td>{{v.worksite_num}}</td>
                <td>
                    <button class="editor"
                            @click='_toStaffInfo(v.id)'
                            :data-id="v.id">详情</button>
                    <button class="shelves" @click="handleDel(v.id)">删除</button>
                    <!-- <button class="delete">关闭订单</button> -->
                </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title"
                  colspan="8">当前数据空空如也</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    	<div class="sale_bottom_page">
			<div class="sale_bottom_page_left">
				<div class="sale_bottom_page_left_checkAll" @click="handerCheckAll">
					<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
          <div class="checkbox-botton">全选</div>
				</div>				
				<el-button type="primary" @click="selectDel" :disabled="openIsDisabled ">删除</el-button>
			</div>
			<div class="sale_bottom_page_right">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="page"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="pagesize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total"
					  background>
				</el-pagination>
			</div>
		</div>
  </div>
</template>
	
	<script>
  // import util from '@/uitls/util';
export default {
  data () {
    return {
      input: '',
      checkAll: false,
      currentPage4: 1,
      checkBoxAll: [],				// 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      tagType: [], //店铺标签
      shopTagList: [],
      value2: '',
      sid:null,
      openIsDisabled: false, //按钮的禁用
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      estate_id:null
    }
  },
  mounted () {
    this.sid = localStorage.getItem('sid')  
    this._getOrdersList()
  },
  methods: {
     handleAdd(){
      this.$router.push({ path: "/decoraTeamAdd" })
    },
    // 多选
			handlerCheckbox(i){
        console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},

    // 选中删除
    selectDel() {
      if(!this.shelvesAlls.length){
        this.$message.warning('请选择需要删除的成员')
        return
      }
      this.$confirm("此操作将删除选中成员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = {
          id:this.shelvesAlls.join(',')
        }
        this.$http.post('/api/admin/builder/Builder/del',params).then(res=>{
          if(res.code==1){
            this.$message.success('删除成功')
            this.checkBoxAll = []
            this.checkAll = false
            this.shelvesAlls = []
            this._getOrdersList()
            console.log(this.shelvesAlls);
          }else{
            this.$message.warning(res.msg)
          }
        })
      }).catch(() => {});
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this._getOrdersList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.page = val
      this._getOrdersList()
    },
    // hangerInto () {
    //   this.$router.push({ path: '/paymentDetails' });
    // },
    // 获取员工列表
    _getOrdersList () {
      let params = {
        decoration_id:this.sid,
        // estate_id:this.estate_id,
        keyword:this.input,
        page:this.page,
        pagesize: this.pagesize,
      }
      this.$http.post('/api/admin/decoration/Builder/index',params).then(res=>{
           console.log(res, "团队员工列表数据");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total;  //总条数
        //   this.shopTagList = res.data.estate_list
          if (this.tableList.length == 0) {
              this.openIsDisabled = true;
            } else {
              this.openIsDisabled = false;
          }
        }

      })
    },

    // 搜索按钮
    toSearch(){
      this._getOrdersList()
    },

    //点击详情跳转
    _toStaffInfo (id) {
      // console.log(e);
      // let id = e.target.dataset.id;
      this.$router.push({name:'teamAdd',query:{staffId:id}})
    },
    handleDel(event){
      this.$confirm('确定要删除该成员吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        let params = {
          id:event
        }
        this.$http.post('/api/admin/builder/Builder/del',params).then(res=>{
          if(res.code==1){
            this.$message.success('删除成功')
            this._getOrdersList()
          }else{
            this.$message.warning(res.msg)
          }
        })
      })
    }
  },
}
	</script>


<style lang="less" scoped="scoped">
@import "teamList.less";
</style>
